<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>歌单列表</title>


    <style>

        table tr:nth-child(even) {
            background-color: #f5e5bb;
        }
        /*table tr:nth-child(even) {*/
        /*    background-color: #ffffff;*/
        /*}*/

    </style>
</head>
<body>
<div class="container">

    <h1>歌单列表</h1>
    <form id="searchForm" action="pgeList">
    <span>发布时间开始：<input name="startTime" type="date" value="${startTime}"/>
        <input name="pageNo" id="pageNo" type="hidden" value="${pageNo}"/></span>
    <span>发布时间结束：<input name="endTime" type="date" value="${endTime}"/></span>
    <span><input type="submit" value="查询"></span>

    </form>
    <span><button onclick="add()">新增歌单</button></span>
    <!-- 表格展示歌单 -->
    <table class="playlist-table">
        <thead>
        <tr>
            <th>编号</th>
            <th>歌单名称</th>
            <th>封面</th>
            <th>描述</th>
            <th>歌曲数量</th>
            <th>发布时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- 假设songList是从请求作用域获取的，并且已经根据分页参数进行了裁剪 -->
        <c:forEach var="playlist" items="${dataList}" varStatus="status">
            <tr>
                <td>${playlist.id}</td>
                <td>${playlist.title}</td>
                <td><img src="${playlist.picture}" style="width: 100px; height: 100px;"></td>

                <td>${playlist.info}</td>
                <td>${playlist.num}</td>
                <td>${playlist.create_time}</td>
                <td><a href="goEdit?id=${playlist.id}">修改</a>
                    &nbsp;&nbsp;
                    <a href="del?id=${playlist.id}">删除</a></td>
            </tr>
        </c:forEach>
        </tbody>
    </table>

    <!-- 分页控制（重复放置以便于滚动时也能看到） -->
    <div class="pagination">
        <a href="javascript:page(1)">首页</a>
        <a href="javascript:page(${pageNo - 1})">上一页</a>
        <a href="javascript:page(${pageNo + 1})">下一页</a>
        <a href="javascript:page(${totalPage})">尾页</a>
        <span>第 ${pageNo} 页，共 ${totalPage} 页，总记录数${totalCount}</span>
    </div>
</div>
</body>
<script src="statics/js/jquery-3.7.1.min.js"></script>
<script>
    function page(pageNo){
        $("#pageNo").val(pageNo);
        $("#searchForm").submit()
    }

    function add(){
        location.href='goAdd';
    }


</script>

</html>